<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Lesson11 - React第十一课之组合与继承</title>
  </head>
  <body>
    <div id="app"></div>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      const appDom = document.getElementById('app');
      function FancyBorder(props) {
        return (
          <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
          </div>
        );
      }
      function Dialog(props) {
        return (
          <FancyBorder color="blue">
            <h1 className="Dialog-title">
              {props.title}
            </h1>
            <p className="Dialog-message">
              {props.message}
            </p>
            {props.children}
          </FancyBorder>
        );
      }

      class SignUpDialog extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
          this.handleSignUp = this.handleSignUp.bind(this);
          this.state = {login: ''};
        }

        render() {
          return (
            <Dialog title="Mars Exploration Program"
                    message="How should we refer to you?">
              <input value={this.state.login}
                    onChange={this.handleChange} />

              <button onClick={this.handleSignUp}>
                Sign Me Up!
              </button>
            </Dialog>
          );
        }

        handleChange(e) {
          this.setState({login: e.target.value});
        }

        handleSignUp() {
          alert(`Welcome aboard, ${this.state.login}!`);
        }
      }
      ReactDOM.render(<SignUpDialog />, appDom);
    </script>
  </body>
</html>